<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="http://localhost:8080/js/echarts.js"></script>
    <style>
        #app{
            width: 100%;
            height: 100%;
        }
        .leftbox {
            width: 450px;
            height: 100%;
            /*background-color: #aadddd;*/
            float: left;
        }
        .rightbox {
            height: 100%;
            /*background-color: #f08844;*/
            margin-left: 450px;
        }
        #query{
            top:100px;
            width:100%;
            height:100px;

        }
        #world{
            width:100%;
            height:280px;

        }
        #country{
            width:100%;
            height:280px;
        }
    </style>
<body>
<div id="app">
    <div class="leftbox">
        <div id="query">
            <input v-model="message" placeholder="country" style="height: 50%;width: 70%;margin-top: 5%; font-size: 20px;" >
            <button v-on:click="fetchData" style="height: 52%;width: 20%;margin-top: 5%; font-size: 20px;">查询</button>
        </div>

        <div id="world">
            <div  style="height: 50%;width: 70%;margin-top: 5%; font-size: 20px;" >
                全球累积确诊人数:{{newWorldCount}}
            </div>
            <div  style="height: 50%;width: 70%;font-size: 20px;" >
                全球新增确诊人数:{{addWorldCount}}
            </div>

        </div>


        <div id="country">
            <div style="height: 50%;width: 70%;margin-top: 5%; font-size: 20px;">
                {{message}}累积确诊人数:{{newCotyCount}}
            </div>

            <div style="height: 50%;width: 70%;margin-top: 5%; font-size: 20px;">
                {{message}}新增确诊人数:{{addCotyCount}}
            </div>

        </div>
    </div>
    <div class="rightbox">
        <div id="main" style="width: 1300px;height:800px; margin-left: 50px"></div>
    </div>

</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'china',
            newWorldCount: null,
            newCotyCount: null,
            addWorldCount: null,
            addCotyCount: null,
            citys: null

        },
        created: function () {

        },
        mounted: function () {
            this.fetchData();


        },
        methods: {
          fetchData:function () {
              axios.get("http://localhost:8080/data?country="+this.message)
                  .then((response) => {
                  console.log(this.message);
              this.newWorldCount = response.data.newWorldCount;
              this.newCotyCount = response.data.newCotyCount;
              this.addWorldCount = response.data.addWorldCount;
              this.addCotyCount = response.data.addCotyCount;
              this.citys=response.data.citys;

              // 基于准备好的dom，初始化echarts实例
              var xData=Object.keys(this.citys)
              var yData=Object.values(this.citys)
              // for( var x in this.citys){
              //     xData.push(x)
              //     yData.push(this.citys[x])
              // }
              // alert("xdata:"+xData)
              // alert("ydata:"+yData)
              var myChart = echarts.init(document.getElementById('main'));
              // 指定图表的配置项和数据
              var option = {
                  title: {
                      text: '该国省或州的确诊人数'
                  },
                  tooltip: {},
                  legend: {
                      data: ['确诊人数']
                  },
                  grid:{

                  },
                  dataZoom: [
                      {
                          id: 'dataZoomX',
                          type: 'slider',
                          xAxisIndex: [0],
                          filterMode: 'empty'
                      },
                      {
                          id: 'dataZoomY',
                          type: 'slider',
                          yAxisIndex: [0],
                          filterMode: 'empty'
                      }
                  ],
                  xAxis: {
                      data: xData
                  },
                  yAxis: {},
                  series: [{
                      name: '确诊人数',
                      type: 'bar',
                      data:  yData
                  }]
              };

              // 使用刚指定的配置项和数据显示图表。
              myChart.setOption(option);

          })
          }
        }
    })


</script>

</body>
</html>